<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div class="friednDetail">
        <div class="friednDetailHead">
            <router-link to="/my">
                <img src="../../../assets/image/toux.png" style="float: left;margin-top: 10px;">
            </router-link>
            急寻：面神经炎的治疗方法有哪些？
            <router-link to="/message">
                <img src="../../../assets/image/ld.png" style="float: right;margin-top: 10px;">
            </router-link>
        </div>
        <div class="friednDetailMain">
            <div>
                <p>王子恒</p>
                <p>[病症]</p>
                <p style="color: #000;">1.面神经炎</p>
                <p>科室</p>
                <p style="color: #000;">内科</p>
                <p>[病症详情]</p>
                <p style="color: #000;">面神经炎是一种常见的神经病，它是由神经纤维的纤维化、结缔组织、神经胶质.</p>
                <p>[治疗经历]</p>
                <p style="color: #000;">北京天坛医院</p>
                <p style="color: #000;">每天进行针扎和按摩，现在情况已经好转了，眼镜基本上可以闭合，讲话也没有那么费劲</p>
                <p>[相关图片]</p>
                <p>
                    <img src="../../../assets/image/kbzm.png" alt="">
                </p>
                <p style="float: right;" @click="showInput = true">※ 3 ℹ 122</p><br>
                <p style="font-size: 20px;font-weight: 900;">|被采纳的建议</p>

                <dl>
                    <dt><img src="../../../assets/image/toux.png" @click="yhxx()" style="width: 40px;
                    height: 40px;border-radius: 50%;"></dt>
                    <dd>
                        猪小妹
                    </dd>
                    <dd style="color: orange;">
                        获得20金币
                    </dd>
                    <b>{{ `${2008}-${1}-${19} ${Time}` }}</b><br>

                    <div>
                        你好，面神将炎也将麻痹你的神经，请注意，不要长时间坐立不移动，否则会损伤你的神经。肌肉也会随之猥琐，请注意。
                        <br>
                        千万要注意休息，不要长时间坐立不移动，否则会损伤你的神经。肌肉也会随之猥琐，请注意。
                    </div>
                </dl><br>
                <!-- //添加后的内容 -->
                <dl v-show="isElementVisible">
                    <dt><img src="../../../assets/image/toux.png" @click="yhxx()"
                            style="width: 40px;height: 40px;border-radius: 50%;" />
                    </dt>
                    <dd>
                        孙猴子
                    </dd>
                    <dd style="color: orange;">
                        获得200金币
                    </dd>
                    <b>{{ `${year}-${month}-${day} ${Time}` }}</b><br>
                    <dd>

                        <ul>
                            <li v-for="content in contents" :key="content">{{ content }}</li>
                        </ul>

                    </dd>
                </dl>
                <!-- //留言 -->
                <div v-if="showInput">
                    <div style="position: fixed;left: 10%;
                        top:40%">
                        <img src="../../../assets/image/toux.png" style="position: fixed;left: 10%;
                        top:40%">
                        <input v-model="newContent" type="text" style="width:200px;height: 100px;position: fixed;left: 20%;
                        top:40%;border-radius: 10px;opacity: 0.8;border: 1px solid orange;   "><br>

                        <button @click="addContent" style="position: fixed;left: 75%;
                        top:50%">发布</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="friednDetailFoot">
            <van-tabbar>
                <van-tabbar-item icon="home-o" @click="toHome()">首页</van-tabbar-item>
                <van-tabbar-item icon="search" @click="shux()">书写</van-tabbar-item>
                <van-tabbar-item icon="setting-o" @click="sp()" >视频</van-tabbar-item>
            </van-tabbar>
        </div>
    </div>
</template>
<script lang='ts' setup>
import { ref } from 'vue';
import router from '@/router';
const toHome = () => {
    router.push('/home')
}
const shux=()=>{
  router.push('/friend/writepyq')
}
const sp=()=>{
    console.log('啊数据库好多了')
    router.push('/video')
}
//用户信息页面
const yhxx = () => {
    router.push('/friend/detail/userxx')
    console.log('啊数据库好多了')
}
const now = new Date();
const year = now.getFullYear();
const month = now.getMonth() + 1; // 月从 0 开始，要加 1
const day = now.getDate();
// 获取当前时间
const date = new Date();
const Time = date.toLocaleTimeString();
//信息弹出
const showInput = ref(false);
const newContent = ref('');
const contents = ref<string[]>([]);
let isElementVisible = false;
const addContent = () => {
    if (newContent.value.trim() !== '') {
        contents.value.push(newContent.value);
        newContent.value = '';
        showInput.value = false;

    }
    isElementVisible = !isElementVisible;
};


</script>
<style scoped lang="scss">
.friednDetail {
    width: 100vw;
    height: 100vh;
    background-color: #f1f1f1;

    .friednDetailHead {
        position: fixed;
        z-index: 1;
        width: 100%;
        height: 50px;
        background-color: #fff;
        text-align: center;
        line-height: 50px;
        margin-bottom: 50px;
    }

    .friednDetailMain {
        width: 100%;
        height: auto;
        overflow: scroll;
        padding-top: 50px;

        div {
            margin-bottom: 50px;

            p {
                color: rgb(110, 110, 217);

                img {
                    margin-left: 15%;
                }
            }

            dl {
                margin-top: 10px;
                margin-bottom: 10px;
                width: 100%;
                height: 180px;
                background-color: #f1f1f1;

                dt {
                    float: left;
                    margin-top: 10px;
                }

                dd {
                    margin-top: 10px;
                }

                b {
                    margin-top: -20px;
                    float: right;
                }
            }
        }
    }

    .friednDetailFoot {
        width: 100%;
        height: 50px;
        background: #fff;
        position: fixed;
        bottom: 0;
    }
}
</style>